<template>
  <view class="containter">
    <uv-navbar :title="$i18n.t('contactUs')" autoBack bgColor="#104682" leftIconColor="#fff" placeholder
      :titleStyle="{'color': '#fff'}"></uv-navbar>
    <view class="block">
      <view class="block-title">
        {{$i18n.t('contactUs')}}
      </view>
      <view class="block-item">
        <view class="label">
          {{ $i18n.t('contactDetails') }}：
        </view>
        <view class="value">
          {{ footerInfo.contact_information }}
        </view>
      </view>
      <view class="block-item">
        <view class="label">
          {{ $i18n.t('faxNumber') }}：
        </view>
        <view class="value">
          {{ footerInfo.fax_number }}
        </view>
      </view>
      <view class="block-item">
        <view class="label">
          {{ $i18n.t('email') }}：
        </view>
        <view class="value">
          {{ footerInfo.email }}
        </view>
      </view>
      <view class="block-item">
        <view class="label">
          {{ $i18n.t('address') }}：
        </view>
        <view class="value">
          {{ footerInfo.address }}
        </view>
      </view>
    </view>
    <view class="downer"></view>
    <view class="block">
      <view class="block-title">
        {{ $i18n.t('messageBoard') }}
      </view>
      <view class="block-form">
        <view class="block-form-item">
          <view class="label">
            <text style="color: red;">*</text>{{ $i18n.t('fullName') }}：
          </view>
          <input type="text" class="ipt" v-model="formLine.user_name" :placeholder="$i18n.t('palseEnter')" placeholder-class="styles">
        </view>
        <view class="block-form-item">
          <view class="label">
            <text style="color: red;">*</text>{{ $i18n.t('cellPhoneNumber') }}：
          </view>
          <input type="text" class="ipt" v-model="formLine.mobile" :placeholder="$i18n.t('palseEnter')" placeholder-class="styles">
        </view>
        <view class="block-form-item">
          <view class="label">
            <text style="color: red;">*</text>{{ $i18n.t('email') }}
          </view>
          <input type="text" class="ipt" v-model="formLine.email" :placeholder="$i18n.t('palseEnter')" placeholder-class="styles">
        </view>
        <view class="block-form-item">
          <view class="label">
            <text style="color: red;">*</text>{{ $i18n.t('enterpriseName') }}
          </view>
          <input type="text" class="ipt" v-model="formLine.enterprise_name" :placeholder="$i18n.t('palseEnter')"
            placeholder-class="styles">
        </view>
        <view class="block-form-item">
          <view class="label">
            <text style="color: red;">*</text>{{ $i18n.t('enterJob') }} 
          </view>
          <input type="text" class="ipt" v-model="formLine.position" :placeholder="$i18n.t('palseEnter')" placeholder-class="styles">
        </view>
        <view class="block-form-item">
          <view class="label">
            <text style="color: red;">*</text>{{ $i18n.t('requirementSuggestion') }}
          </view>
          <textarea style="min-height: 200rpx;padding: 20rpx;box-sizing: border-box;" class="ipt"
            v-model="formLine.textarea" :placeholder="$i18n.t('palseEnter')" placeholder-class="styles"></textarea>
        </view>
      </view>
    </view>
    <view style="width: 100%;height: 150rpx;"></view>
    <view class="footer">
      <view class="btn" @click="onSave">{{ $i18n.t('submit') }}</view>
    </view>
    <uv-modal ref="modal" :title="$i18n.t('remind')" :confirmText="$i18n.t('submitTxt')" :content="$i18n.t('submitContactYou')" @confirm="confirm"></uv-modal>
  </view>
</template>

<script>
  import reqApi from "../../api/api.js";
  import tools from "../../utils/index.js"
  export default {
    data() {
      return {
        formLine: {
          user_name: "",
          mobile: "",
          email: "",
          enterprise_name: "",
          position: "",
          textarea: "",
        },
        footerInfo: {}
      }
    },
    onLoad() {
      this.getData();
    },
    methods: {
      onSave() {
        if (!this.formLine.user_name) {
          uni.showToast({
            title: "姓名不能为空",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          return
        }
        if (!this.formLine.mobile) {
          uni.showToast({
            title: "手机号不能为空",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          return
        }
        // if (!tools.checkPhone(this.formLine.phone)) {
        //   uni.showToast({
        //     title: "手机号格式错误",
        //     icon: 'none',
        //     mask: true,
        //     duration: 1500,
        //   })
        //   return
        // }
        if (!this.formLine.email) {
          uni.showToast({
            title: "邮箱不能为空",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          return
        }
        if (!tools.isEmailAvailable(this.formLine.email)) {
          uni.showToast({
            title: "邮箱格式错误",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          return
        }
        if (!this.formLine.enterprise_name) {
          uni.showToast({
            title: "企业名称不能为空",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          return
        }
        if (!this.formLine.position) {
          uni.showToast({
            title: "职位不能为空",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          return
        }
        if (!this.formLine.textarea) {
          uni.showToast({
            title: "需求建议不能为空",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          return
        }
        reqApi.createMessageBoard(this.formLine).then(res => {
          this.$refs.modal.open();
        })

      },
      getData() {
        reqApi.basicFooter({}).then((res) => {
          console.log("页脚数据", res);
          this.footerInfo = res.data;
        });
      }
    }
  }
</script>
<style>
  .styles {
    font-weight: 400;
    font-size: 28rpx;
    color: #AAAAAA;
  }
</style>
<style lang="scss" scoped>
  .footer {
    padding: 30rpx 50rpx;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    background: #fff;

    .btn {
      width: 100%;
      height: 88rpx;
      background: #104682;
      border-radius: 20rpx;
      font-weight: bold;
      font-size: 32rpx;
      color: #FFFFFF;
      text-align: center;
      line-height: 88rpx;
    }
  }

  .block-form {
    .block-form-item {
      margin-top: 40rpx;

      .label {
        font-weight: 400;
        font-size: 28rpx;
        color: #333333;
        margin-bottom: 20rpx;
      }

      .ipt {
        width: 100%;
        height: 88rpx;
        background: #FAFAFA;
        border-radius: 20rpx;
        padding: 0 28rpx;
        box-sizing: border-box;
      }
    }
  }

  .containter {
    .block {
      padding: 40rpx;
      box-sizing: border-box;
      background: #fff;

      .block-title {
        font-weight: 600;
        font-size: 32rpx;
        color: #333333;
      }

      .block-item {
        display: flex;
        align-items: center;
        margin-top: 30rpx;

        .label {
          font-weight: 400;
          font-size: 28rpx;
          color: #666666;
        }

        .value {
          font-weight: 400;
          font-size: 28rpx;
          color: #333333;
        }
      }
    }
  }
</style>